设为首页收藏本站
开启辅助访问

使用Iframe将ThingJS项目嵌入到我们的前端页面

 您所在的位置：网站首页 › vue thingjs › 使用Iframe将ThingJS项目嵌入到我们的前端页面

使用Iframe将ThingJS项目嵌入到我们的前端页面

2024-07-17 15:00| 来源: 网络整理| 查看: 265

在使用ThingJS制作物联网可视化项目时，怎么去通过Iframe将ThingJS嵌入到我们的项目中去的呢？或者说，iframe嵌入后，怎么去写脚本进行交互呢？本文将写一个简单的示例告诉大家，如何在自己项目中去控制ThingJS项目，达到交互的功能。

ThingJS官方示例中有许多的功能代码，在这里就不为大家一一讲解，直接上代码：

DOCTYPE html>        ThingJS的 Iframe演示            飞到小车        返;;;;;;;;回                        function flyToCar() {            var a = document.getElementById("testMsg");            var msg = {                funcName: 'test'            }            a.contentWindow.postMessage(msg, "*");        }        function flyToBack() {            var a = document.getElementById("testMsg");            var msg = {                funcName: 'test2',                param: "2"            }            a.contentWindow.postMessage(msg, "*");        }    

这里面，我们要注意的是，我们要调用什么方法，就在msg中的方法名参数后面写上要被调用的方法，在ThingJS中我们接收的时候要注意这边写的是funcName和param，那么我们在ThingJS中接收数据的时候也是要通过XXX.funcName或XXX.param来接收，这个虽然是基础知识，但是也不要在这里出错哟~，话不多说，上ThingJS中的代码：

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址});app.on('load', function (ev) {var campus = ev.campus;// 开启系统层级app.level.change(campus);});app.on(THING.EventType.LevelChange, function (ev) {var obj = ev.object;var name = obj.name;var type = obj.type;var id = obj.id;var info = "进入 " + type + " (" + name + ")";// 调用 用户主页面的 upDateInfo 方法callFuncInMain('upDataInfo', { info, id });})function callFuncInMain(funcName, data) {var message = {'funcName': funcName // 所要调用父页面里的函数名// 'param': data}// 向父窗体(用户主页面)发送消息// 第一个参数是具体的信息内容，// 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送window.parent.postMessage(message, '*');}function changeLevel(id) {var obj = app.query('#' + id)[0];if (obj) {app.level.change(obj);}}// 监听用户页面传回的数据 并调用 ThingJS 页面方法window.addEventListener('message', function (e) {var data = e.data;var funcName = data.funcName;var param = data.param;// 调用 ThingJS 页面方法window[funcName](param);});function test() {var car = app.query('car01')[0];app.camera.flyTo({object: car,xAngle: 0, // 绕物体自身X轴旋转角度yAngle: 0, // 绕物体自身Y轴旋转角度radiusFactor: 2, // 物体包围盒半径的倍数time: 2 * 1000,complete: function () {console.log("飞行结束");}});}function test2(obj) {app.camera.flyTo({        position: [50.260000000000005,35.129000000000005,59.32699999999999],        target: [8.0, -2.0, 4.0],        time: obj*1000,        complete: function () {            console.log('飞行结束')        }    });}

大家有兴趣也可以自行尝试使用Iframe的方式将您自己的ThingJS项目嵌入到您自己的页面中去呢~



【本文地址】


今日新闻

推荐新闻

    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3